<template>
  <view>
    <div class="main-content">
      <van-tabs
        animated="true"
        line-height="5rpx"
        swipeable="true"
        title-style="font-size: 10rpx"
      >
        <van-tab title="论坛" style="font-size: 20rpx">
          <xiri-atricle
            class="text-area"
            v-for="artInfo in allList"
            :key="artInfo._id"
            :article="artInfo"
          />
        </van-tab>
        <van-tab title="排行榜" style="font-size: 40rpx">
          <xiri-atricle
            class="text-area"
            v-for="artInfo in orderedList"
            :key="artInfo._id"
            :article="artInfo"
          />
        </van-tab>
        <van-tab title="我的" style="font-size: 40rpx">
          <xiri-atricle
            class="text-area"
            v-for="artInfo in userList"
            :key="artInfo._id"
            :article="artInfo"
          />
        </van-tab>
      </van-tabs>
    </div>
    <van-image round width="60" height="60" src="/static/ic_add.png" class="com-widget-goTop" @click="jumpUp" v-show="hidden"/>
    <div style="height: 150rpx" />
    <van-tabbar
      :active="active"
      active-color="#07c160"
      inactive-color="#000"
      @change="onChange"
    >
      <van-tabbar-item icon="shop-o">食堂</van-tabbar-item>
      <van-tabbar-item icon="search">课程</van-tabbar-item>
      <van-tabbar-item icon="records">穿搭</van-tabbar-item>
      <div>
        <button open-type="contact" class="btn" style="line-height:1;width:180rpx;border:0" plain>
          <image src="../../../static/service.svg" style="margin-top: 8px"/>
          <view style="font-size: 12px; font-color: black; margin-top: 4px">联系我们</view>
        </button>
      </div>
    </van-tabbar>
    <van-popup
      :show="showText"
      position="bottom"
      custom-style="height: 20%"
      @close="onClose"
    >
      <van-field
        :value="comment"
        placeholder="添加您的评论"
        border="true"
        autosize
        @change="fieldChange()"
        style="float: left"
      />
      <van-button @click="uploadComment" style="float: right" type="info"
        >发表</van-button
      >
    </van-popup>
  </view>
</template>

<script >
import XiriAtricle from "./components/xiri-atricle.vue";
export default {
  components: {
    XiriAtricle,
  },
  data() {
    return {
      _id: undefined,
      nickname: "",
      allList: [],
      userList: [],
      orderedList: [],
      userInfoList: [],
      curr_class: 1,
      active: 0,
      update: true,
      ready: true,
      showText: false,
      comment: "",
      commentOfArticle: undefined,
      hidden: false,
    };
  },
  methods: {
    //跳转到其他界面
    jumpUp() {
      uni.navigateTo({
        url: "../newArt/newArt?_id="+this._id,
      });
    },
    //field绑定
    fieldChange(e) {
      this.comment = e.detail;
    },
    //切换tabbar
    onChange(event) {
      this.active = event.detail;
      if(this.active < 3){
        this.curr_class = this.active + 1;
        this.getAllList();
        this.getOrderedList();
        this.getUserList();
      }
    },

    //获取所有的说说
    getAllList() {
      this.wyhhyjrequest
        .run("getAllList", { class_id: this.curr_class })
        .then((res) => {
          this.allList = res.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取当前选中类的排行榜
    getOrderedList() {
      this.wyhhyjrequest
        .run("getOrderedList", { class_id: this.curr_class })
        .then((res) => {
          this.orderedList = res.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取所有该用户的说说
    getUserList() {
      this.wyhhyjrequest
        .run("getUserList", { _id: this._id })
        .then((res) => {
          this.userList = res.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //打开/关闭评论
    showPopup(obj) {
      this.updateComment = obj.updateComment;
      this.commentOfArticle = obj.article.a_id;
      this.showText = true;
      this.hidden = false;
    },
    onClose() {
      this.showText = false;
      this.comment = "";
      this.hidden = true;
    },
    //上传评论
    async uploadComment() {
      const res = await this.wyhhyjrequest.run("createComment", {
        a_id: this.commentOfArticle,
        u_id: this._id,
        content: this.comment,
      });
      this.updateComment();
      this.onClose();
    },
    //进入登录
    async login() {
        const res1 = await this.wyhhyjrequest.user.logInByOAuth({platform: "weixinMiniProgram",})
        const res2 = await this.wyhhyjrequest.run('login', {})
        this._id = res2.result._id
        this.nickname=res2.result.nickname
    },
  },
  async created() {
    await this.login()
    this.hidden = true
    this.wyhhyjrequest
      .run("getUser", { _id: this._id })
      .then((res) => {
        this.username = res.result.username;
        console.log(this.username);
      })
      .catch((err) => {
        console.log(err);
      });
    this.getAllList();
    this.getUserList();
    this.getOrderedList();
  },
};
</script>

<style>
.main-content {
  /* background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%); */
  background-color: #ebedf0;
  background-size: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
}

.main-tabs {
  font-size: 45rpx;
}

.text-area {
  display: flex;
  margin-top: 20rpx;
  margin-left: 20rpx;
  margin-bottom: 10rpx;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.com-widget-goTop {
  position: fixed;
  bottom: 150rpx;
  border-radius: 50%;
  overflow: hidden;
  right: 5vw;
  cursor: pointer;
  opacity: 0.7;
  z-index: 999;
}
.btn image{
  width: 18px;
  height: 18px;
}


</style>